[V0_FILE]typescript:file="app/layout.tsx" isEdit="true" isMerged="true" import './globals.css' import { Inter } from 'next/font/google' const inter = Inter({ subsets: ['latin'] }) export const metadata = { title: 'Solo Builders Community', description: 'Accelerator platform for solo builders working on side projects', } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescript:file="app/page.tsx" isEdit="true" isMerged="true" import LandingPage from './components/LandingPage' export default function Home() { return } [V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; :root { --foreground-rgb: 255, 255, 255; --background-start-rgb: 0, 0, 0; --background-end-rgb: 0, 0, 0; --primary: 255, 77, 0; --primary-foreground: 0, 0, 0; } body { color: rgb(var(--foreground-rgb)); background: rgb(var(--background-start-rgb)); } html { scroll-behavior: smooth; } /* Hide scrollbar for Chrome, Safari and Opera */ .overflow-y-auto::-webkit-scrollbar { display: none; } /* Hide scrollbar for IE, Edge and Firefox */ .overflow-y-auto { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } .dark { --primary: 255, 77, 0; --primary-foreground: 0, 0, 0; } @layer utilities { .noise { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); } } [V0_FILE]typescriptreact:file="app/components/ui/squares-background.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" import { useRef, useEffect, useState } from "react" interface SquaresProps { direction?: "right" | "left" | "up" | "down" | "diagonal" speed?: number borderColor?: string squareSize?: number hoverFillColor?: string className?: string } export function Squares({ direction = "right", speed = 1, borderColor = "#333", squareSize = 40, hoverFillColor = "#222", className, }: SquaresProps) { const canvasRef = useRef(null) const requestRef = useRef() const numSquaresX = useRef() const numSquaresY = useRef() const gridOffset = useRef({ x: 0, y: 0 }) const [hoveredSquare, setHoveredSquare] = useState<{ x: number y: number } | null>(null) useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return // Set canvas background canvas.style.background = "#060606" const resizeCanvas = () => { const rect = canvas.getBoundingClientRect() canvas.width = rect.width canvas.height = rect.height numSquaresX.current = Math.ceil(canvas.width / squareSize) + 1 numSquaresY.current = Math.ceil(canvas.height / squareSize) + 1 } window.addEventListener("resize", resizeCanvas) resizeCanvas() const drawGrid = () => { ctx.clearRect(0, 0, canvas.width, canvas.height) const startX = Math.floor(gridOffset.current.x / squareSize) * squareSize const startY = Math.floor(gridOffset.current.y / squareSize) * squareSize ctx.lineWidth = 0.5 for (let x = startX; x < canvas.width + squareSize; x += squareSize) { for (let y = startY; y < canvas.height + squareSize; y += squareSize) { const squareX = x - (gridOffset.current.x % squareSize) const squareY = y - (gridOffset.current.y % squareSize) if ( hoveredSquare && Math.floor((x - startX) / squareSize) === hoveredSquare.x && Math.floor((y - startY) / squareSize) === hoveredSquare.y ) { ctx.fillStyle = hoverFillColor ctx.fillRect(squareX, squareY, squareSize, squareSize) } ctx.strokeStyle = borderColor ctx.strokeRect(squareX, squareY, squareSize, squareSize) } } const gradient = ctx.createRadialGradient( canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, Math.sqrt(Math.pow(canvas.width, 2) + Math.pow(canvas.height, 2)) / 2, ) gradient.addColorStop(0, "rgba(6, 6, 6, 0)") gradient.addColorStop(1, "#060606") ctx.fillStyle = gradient ctx.fillRect(0, 0, canvas.width, canvas.height) } const updateAnimation = () => { const effectiveSpeed = Math.max(speed, 0.1) switch (direction) { case "right": gridOffset.current.x = (gridOffset.current.x - effectiveSpeed + squareSize) % squareSize break case "left": gridOffset.current.x = (gridOffset.current.x + effectiveSpeed + squareSize) % squareSize break case "up": gridOffset.current.y = (gridOffset.current.y + effectiveSpeed + squareSize) % squareSize break case "down": gridOffset.current.y = (gridOffset.current.y - effectiveSpeed + squareSize) % squareSize break case "diagonal": gridOffset.current.x = (gridOffset.current.x - effectiveSpeed + squareSize) % squareSize gridOffset.current.y = (gridOffset.current.y - effectiveSpeed + squareSize) % squareSize break } drawGrid() requestRef.current = requestAnimationFrame(updateAnimation) } const handleMouseMove = (event: MouseEvent) => { const rect = canvas.getBoundingClientRect() const mouseX = event.clientX - rect.left const mouseY = event.clientY - rect.top const startX = Math.floor(gridOffset.current.x / squareSize) * squareSize const startY = Math.floor(gridOffset.current.y / squareSize) * squareSize const hoveredSquareX = Math.floor( (mouseX + gridOffset.current.x - startX) / squareSize, ) const hoveredSquareY = Math.floor( (mouseY + gridOffset.current.y - startY) / squareSize, ) setHoveredSquare({ x: hoveredSquareX, y: hoveredSquareY }) } const handleMouseLeave = () => { setHoveredSquare(null) } // Event listeners window.addEventListener("resize", resizeCanvas) canvas.addEventListener("mousemove", handleMouseMove) canvas.addEventListener("mouseleave", handleMouseLeave) // Initial setup resizeCanvas() requestRef.current = requestAnimationFrame(updateAnimation) // Cleanup return () => { window.removeEventListener("resize", resizeCanvas) canvas.removeEventListener("mousemove", handleMouseMove) canvas.removeEventListener("mouseleave", handleMouseLeave) if (requestRef.current) { cancelAnimationFrame(requestRef.current) } } }, [direction, speed, borderColor, hoverFillColor, hoveredSquare, squareSize]) return (

About

Tags

Share

About

Tags

Share

More from huntski

More Templates Like This